<template>
  <div class="detail-catalogue double-layer">
    <div class="section-wrapper" v-for="(item, index) in catalogList" v-if="catalogList?.length >0 ">
      <div class="section-info-wrapper">
        <div class="section-info-main">
          <div class="section-title">
            <template v-if="item.type === 2">
              <template v-if="item.resourceType === 1">
                <PlayCircleTwoTone /> &nbsp;
              </template>
              <template v-else-if="item.resourceType === 2">
                <FilePdfTwoTone /> &nbsp;
              </template>
              {{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}. {{ item.name }}
              <p class="task-hour" style="margin-left: 24px;"
                 v-if="!!item?.videoHour">{{ formatSeconds(item.videoHour)
                }}</p>
            </template>
            <template v-else>
              {{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}. {{ item.name }}
            </template>
          </div>
        </div>
      </div>
      <section class="task-item-expo-wrapper" v-for="(child, cIndex) in item.childList"
               v-if="item.type === 1  && item.childList.length >0 ">
        <a class="task-item">
          <div class="task-type">
            <template v-if="child.resourceType === 1">
              <PlayCircleTwoTone />
            </template>
            <template v-else-if="child.resourceType === 2">
              <FilePdfTwoTone />
            </template>
          </div>
          <div class="task-content">
            <div class="task-name-ctn">
              <div class="task-name">
                {{ cIndex + 1 }}.{{ child.name }}
              </div>
            </div>
            <div class="task-info" v-if="!!child?.videoHour">
              {{ formatSeconds(child.videoHour) }}
            </div>
          </div>
        </a>
      </section>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { formatSeconds } from "@/utils";
import { FilePdfTwoTone, PlayCircleTwoTone } from "@ant-design/icons-vue";

const props = defineProps({
  catalogList: {
    type: Array,
    default: []
  }
});
</script>
<style scoped>
.detail-catalogue {
  padding-bottom: 24px;
}

.detail-catalogue .section-info-wrapper {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 16px;
  background: #f5f8fa;
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
}

.detail-catalogue .section-info-main {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  min-width: 0;
  padding-right: 30px;
}

.detail-catalogue .section-desc, .detail-catalogue .section-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}

.detail-catalogue .section-title {
  font-weight: 500;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  color: #3e454d;
}


.detail-catalogue .task-item-expo-wrapper {
  position: relative;
}

.detail-catalogue .task-item {
  position: relative;
  padding: 16px 8px;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
}

.detail-catalogue .task-item .task-content {
  width: calc(100% - 44px);
}

.detail-catalogue .task-item {
  position: relative;
  padding: 16px 8px;
  display: -webkit-flex;
  display: flex;
  cursor: pointer;
}

.detail-catalogue .task-item .task-content .task-name-ctn {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.detail-catalogue .task-item .task-content .task-name {
  height: 22px;
  line-height: 22px;
  font-size: 16px;
  color: #3e454d;
  margin-bottom: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}

.detail-catalogue .task-item .task-content .task-info {
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #666c80;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}

.task-hour {
  height: 16px;
  line-height: 16px;
  font-size: 13px;
  color: #0a7be0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: normal;
}

.detail-catalogue .task-item .task-type {
  display: -webkit-flex;
  display: flex;
  width: 14px;
  height: 14px;
  margin: 4px 18px 0 12px;
}

</style>
